<template>
  <div class="box">
    <img class="top-icon" src="../assets/images/top-icon.png" alt="" srcset="">
    <div class="title">今日认证：{{ num }}</div>
    <!--  上方图标  -->
    <img class="slIcon" src="../assets/images/slIcon.png" alt="" srcset="">
    <img class="srIcon" src="../assets/images/srIcon.png" alt="" srcset="">
    <dv-charts :option="option" style="height: 365px;"/>
    <!--  下方图标  -->
    <img class="left-icon" src="../assets/images/left-icon.png" alt="" srcset="">
    <img class="right-icon" src="../assets/images/right-icon.png" alt="" srcset="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: '550',
      option: {
        legend: {
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 500
        },
        series: [
          {
            name: '',
            data: [150, 200, 110, 100, 180, 220, 300],
            type: 'line',
            lineStyle: {
              stroke: '#1EB0FC'
            },
            linePoint: {
              radius: 4,
              style: {
                fill: '#fff',
                stroke: 'transparent'
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-top: 25px;
  width: 100%;
  height: calc(100% - 110px) / 2;
  background-image: url("../assets/images/box1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 25px;

  .top-icon {
    width: 160px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 95px;

  }

  .title {
    display: flex;
    font-size: 18px;
    color: #23CEFD;
    margin-left: 30px;
  }

  .left-icon {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .right-icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .srIcon, .slIcon {
    width: 8px;
    height: 8px;
    position: absolute;
    margin-top: 20px;
  }

  .srIcon {
    right: 20px;
  }

  .slIcon {
    left: 20px;
  }
}
</style>
